<script lang="ts" setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import dashboardImg from '@/assets/images/landingpage/screenshots/dashboard.png';
import statusImg from '@/assets/images/landingpage/screenshots/status.png';
import referralsImg from '@/assets/images/landingpage/screenshots/referrals.png';
import customersImg from '@/assets/images/landingpage/screenshots/customers.png';

const { t } = useI18n();

// 系统截图列表
const systemScreenshots = [
    {
        title: t('Dashboard'),
        description: t('Dashboard Desc'),
        image: dashboardImg
    },
    {
        title: t('Brokers Management'),
        description: t('Brokers Management Desc'),
        image: statusImg
    },
    {
        title: t('Referrals Management'),
        description: t('Referrals Management Desc'),
        image: referralsImg
    },
    {
        title: t('Customers Management'),
        description: t('Customers Management Desc'),
        image: customersImg
    }
];

// 视频控制
const showVideo = ref(false);
const toggleVideo = () => {
    showVideo.value = !showVideo.value;
};
</script>

<template>
    <div id="introduction" class="system-intro py-10">
        <div class="background-image"></div>
        <v-container>
            <!-- 标题部分 -->
            <v-row class="mb-10" justify="center">
                <v-col class="text-center" cols="12" md="8">
                    <h2 class="text-h3 font-weight-bold mb-4" data-aos="fade-up" data-aos-duration="500">
                        {{ t('System Introduction Title') }}
                    </h2>
                    <p class="text-subtitle-1" data-aos="fade-up" data-aos-duration="700">
                        {{ t('System Introduction Desc') }}
                    </p>
                </v-col>
            </v-row>

            <!-- 系统截图展示 -->
            <v-row>
                <v-col v-for="(item, index) in systemScreenshots" :key="index" :data-aos-delay="index * 100"
                    class="mb-6" cols="12" data-aos="fade-up" data-aos-duration="800" md="6">
                    <v-card class="h-100 system-card" elevation="10">
                        <v-img :src="item.image" cover height="220"></v-img>
                        <div class="pa-4">
                            <div class="text-h5 font-weight-bold">
                                {{ item.title }}
                            </div>
                            <p>{{ item.description }}</p>
                        </div>
                    </v-card>
                </v-col>
            </v-row>

            <!-- 系统视频介绍 -->
            <!-- <v-row justify="center" class="my-10">
              <v-col cols="12" md="10">
                <h3 class="text-h4 font-weight-bold mb-6 text-center" data-aos="fade-up" data-aos-duration="500">{{ t('Video Demo') }}</h3>
                <p class="text-center text-subtitle-1 mb-6" data-aos="fade-up" data-aos-duration="700">{{ t('Video Desc') }}</p>
                <div class="video-container position-relative" data-aos="zoom-in" data-aos-duration="1000">
                  <v-img
                    v-if="!showVideo"
                    src="/images/backgrounds/system-video-thumbnail.jpg"
                    height="450"
                    cover
                    class="video-thumbnail rounded-lg"
                  >
                    <div class="video-overlay d-flex align-center justify-center">
                      <v-btn
                        icon="mdi-play"
                        size="x-large"
                        color="primary"
                        variant="elevated"
                        class="play-button"
                        @click="toggleVideo"
                      ></v-btn>
                    </div>
                  </v-img>
                  <v-responsive v-else aspect-ratio="16/9">
                    <iframe
                      width="100%"
                      height="100%"
                      src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
                      title="GuaClass System Introduction"
                      frameborder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowfullscreen
                    ></iframe>
                  </v-responsive>
                </div>
              </v-col>
            </v-row> -->

            <!-- 系统特点介绍 -->
            <v-row class="mt-10">
                <v-col cols="12">
                    <h3 class="text-h4 font-weight-bold mb-8 text-center" data-aos="fade-up" data-aos-duration="500">
                        {{ t('Why Choose Us') }}
                    </h3>
                </v-col>
            </v-row>

            <v-row>
                <v-col cols="12" data-aos="fade-up" data-aos-delay="0" data-aos-duration="800" md="4">
                    <v-card class="h-100 feature-card" flat>
                        <v-card-title class="d-flex align-center">
                            <v-icon class="mr-3" color="primary" size="large">mdi-lightning-bolt</v-icon>
                            <span class="text-h5 font-weight-bold">{{ t('Efficiency') }}</span>
                        </v-card-title>
                        <v-card-text class="text-subtitle-1">
                            {{ t('Efficiency Desc') }}
                        </v-card-text>
                    </v-card>
                </v-col>

                <v-col cols="12" data-aos="fade-up" data-aos-delay="200" data-aos-duration="800" md="4">
                    <v-card class="h-100 feature-card" flat>
                        <v-card-title class="d-flex align-center">
                            <v-icon class="mr-3" color="primary" size="large">mdi-shield-check</v-icon>
                            <span class="text-h5 font-weight-bold">{{ t('Security') }}</span>
                        </v-card-title>
                        <v-card-text class="text-subtitle-1">
                            {{ t('Security Desc') }}
                        </v-card-text>
                    </v-card>
                </v-col>

                <v-col cols="12" data-aos="fade-up" data-aos-delay="400" data-aos-duration="800" md="4">
                    <v-card class="h-100 feature-card" flat>
                        <v-card-title class="d-flex align-center">
                            <v-icon class="mr-3" color="primary" size="large">mdi-chart-bar</v-icon>
                            <span class="text-h5 font-weight-bold">{{ t('Data Driven') }}</span>
                        </v-card-title>
                        <v-card-text class="text-subtitle-1">
                            {{ t('Data Driven Desc') }}
                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>

            <!-- 行动号召 -->
            <v-row class="mt-10" justify="center">
                <v-col class="text-center" cols="12" data-aos="fade-up" data-aos-duration="1000">
                    <p class="text-h6 mb-6">{{ t('Free Register') }}</p>
                    <v-btn class="text-uppercase font-weight-bold px-8 py-3" color="primary" data-aos="zoom-in"
                        data-aos-duration="1200" rounded size="large" to="/register" variant="elevated">
                        {{ t('Try Now') }}
                    </v-btn>
                </v-col>
            </v-row>
        </v-container>
    </div>
</template>

<style scoped>
.system-intro {
    position: relative;
    background-color: rgba(248, 249, 250, 0.9);
    z-index: 1;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/images/backgrounds/system-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.1;
    z-index: -1;
}

.system-card {
    transition: all 0.3s ease;
    overflow: hidden;
}

.system-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-card {
    transition: all 0.3s ease;
    padding: 1rem;
    border-radius: 8px;
}

.feature-card:hover {
    background-color: rgba(var(--v-theme-primary), 0.05);
}

.video-thumbnail {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.video-thumbnail:hover {
    border-color: var(--v-theme-primary);
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.video-thumbnail:hover .video-overlay {
    background-color: rgba(0, 0, 0, 0.3);
}

.play-button {
    transform: scale(1.5);
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.video-thumbnail:hover .play-button {
    transform: scale(1.7);
    box-shadow: 0 0 30px rgba(var(--v-theme-primary), 0.7);
}
</style>
